<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>- 历史曲线</title>
<link th:href="@{/profile/imgs/favicon.ico}" rel="shortcut icon" />
<link rel='stylesheet' href='/libs/layui/css/layui.css'>
<link rel='stylesheet' href='/css1/style.css'>
<script type='text/javascript' src='/libs/echarts.min.js'></script>
<script type='text/javascript' src='/libs/jquery-3.6.0.min.js'></script>
<script type='text/javascript' src='/libs/charts_ld.js'></script>
<script type='text/javascript' src='/libs/utils.js'></script>
<script type='text/javascript' src='/libs/formUtil.js'></script>
</head>
<style>
html, body {
	width: 100%;
	height: 100%;
	background-color: #FFF
}
</style>
<body>
	<div class='head clearfix'>
		<h1 class='pulll_left'>
			<a onclick="relocate('/')">[[${name}]]</a>
		</h1>
		<div class='menu menu2 pulll_left'>
			<ul>
				<!-- <li><a th:href="@{/realtime/index}">综合展示</a></li> -->
				<li><a onclick="setlocate('/realtime/washow','')">衡器监控</a></li>
				<li><a onclick="setlocate('/realtime/wacharts','')">实时曲线</a></li>
				<li><a onclick="setlocate('/realtime/wachartshis','')">历史曲线</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waalarmlist','')">告警列表</a></li>
				<li><a onclick="relocate('/index?t=/realtime/waWorkOrderList')">工单列表</a></li>
			</ul>
		</div>
		<div class='time' id='showTime'>1970/01/01 00:00:00</div>
	</div>
	<div class='mainbox'>
		<ul class='clearfix nav1'>
			<li style='width: 100%'>
				<div class='box' style="height: 60px">
					<form class='layui-form' lay-filter='first' id='chartsHisForm'>
						<div class='layui-form-item'
							style='float: left; padding-top: 10px;'>
							<div class='layui-inline'>
								<label class='layui-form-label'
									style='width: 70px; color: #FFF;'>衡器:</label>
								<div class='layui-input-block'
									style='width: 100px;margin-left:70px;color: rgba(0, 0, 0, .85)'>
									<select id='waCode' name='waCode' lay-filter='selectWaCodeOnchange'>
										<option th:each='wa,stat:${waList}' th:text='${wa.waname }'
											th:value='${wa.wacode}'></option>
									</select>
								</div>
							</div>
							<div class='layui-inline'>
								<label class='layui-form-label'
									style='width: 70px; color: #FFF;'>间隔:</label>
								<div class='layui-input-block'
									style='width: 70px;margin-left:70px;color: rgba(0, 0, 0, .85)'>
									<select id='timeInterval' name='timeInterval' lay-filter='selectTimeIntervalOnchange'>
										<option value="1">时</option>
										<option value="2">分</option>
										<option value="3">秒</option>
									</select>
								</div>
							</div>
							<div class='layui-inline' id="divYear">
								<label class='layui-form-label'
									style='width: 70px; color: #FFF;'>年:</label>
								<div class='layui-input-block'
									style='width: 100px;margin-left:70px;color: rgba(0, 0, 0, .85)'>
									<select id='year' name="year" th:with="type=${@dict.getType('sys_year')}">
                                    	<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                	</select>
								</div>
							</div>
							<div class='layui-inline' id="divMonth" style="display: none;">
								<label class='layui-form-label'
									style='width: 70px; color: #FFF;'>月:</label>
								<div class='layui-input-inline'
									style='width: 70px; color: rgba(0, 0, 0, .85)'>
									<select id='month' name='month' lay-filter='month'>
										<option value='01'>1</option>
										<option value='02'>2</option>
										<option value='03'>3</option>
										<option value='04'>4</option>
										<option value='05'>5</option>
										<option value='06'>6</option>
										<option value='07'>7</option>
										<option value='08'>8</option>
										<option value='09'>9</option>
										<option value='10'>10</option>
										<option value='11'>11</option>
										<option value='12'>12</option>
									</select>
								</div>
							</div>
							<div class='layui-inline' id="divDate" style="display: none;">
								<label class='layui-form-label'
									style='width: 70px; color: #FFF;'>日期:</label>
								<div class='layui-input-inline' style='width: 110px;'>
									<input type='text' name='date' id='date' placeholder=''
										autocomplete='true' class='layui-input'>
								</div>
							</div>
							<div class='layui-inline' id="divHour" style="display: none;">
								<label class='layui-form-label'
									style='width: 70px; color: #FFF;'>小时:</label>
								<div class='layui-input-inline'
									style='width: 70px; color: rgba(0, 0, 0, .85)'>
									<select id='hour' name='hour' lay-filter='hour'>
										<option value='01'>1</option>
										<option value='02'>2</option>
										<option value='03'>3</option>
										<option value='04'>4</option>
										<option value='05'>5</option>
										<option value='06'>6</option>
										<option value='07'>7</option>
										<option value='08'>8</option>
										<option value='09'>9</option>
										<option value='10'>10</option>
										<option value='11'>11</option>
										<option value='12'>12</option>
										<option value='13'>13</option>
										<option value='14'>14</option>
										<option value='15'>15</option>
										<option value='16'>16</option>
										<option value='17'>17</option>
										<option value='18'>18</option>
										<option value='19'>19</option>
										<option value='20'>20</option>
										<option value='21'>21</option>
										<option value='22'>22</option>
										<option value='23'>23</option>
										<option value='24'>24</option>
									</select>
								</div>
							</div>
							<div class='layui-inline'>
								<button class='layui-btn' id='btnSubmitChartHis'
									lay-filter='btnSubmitChartHis' lay-submit>查询</button>
							</div>
						</div>
					</form>
					<div class='layui-inline'>
						<button class='layui-btn' id='zoomIn' onclick="zoomIn()"
							style="margin-top: 8px;" title="按比例值修改Y轴最大值">放大</button>
					</div>
					<div class='layui-inline' style="padding-left: 3px;">
						<button class='layui-btn' id='zoomOut' onclick="zoomOut()"
							style="margin-top: 8px;" title="按比例值修改Y轴最大值">缩小</button>
					</div>
					<div class='layui-inline' style="padding-left: 3px;">
						<button class='layui-btn' id='zoomDefault' onclick="zoomDefault()"
							style="margin-top: 8px;" title="恢复至图表加载时，默认的比例">默认</button>
					</div>
					<div class='layui-inline'>
						<label class='layui-form-label' style='width: 100px;padding-top:20px; color: #FFF;' title="每次放大、缩小时，Y轴加减数值">比例值:</label>
						<div class='layui-input-inline'
							style='width: 60px;padding-top:10px; color: rgba(0, 0, 0, .85)'>
							<input type='text' id="zoomScale" placeholder='' value="10"
										autocomplete='true' class='layui-input'>
						</div>
					</div>
					<div class='layui-inline' style="padding-left: 3px;">
						<button class='layui-btn' id='eleShowAll' onclick="eleCheck('eleShowAll')"
							style="margin-top: 8px;">全选</button>
					</div>
					<div class='layui-inline' style="padding-left: 3px;">
						<button class='layui-btn' id='eleInverse' onclick="eleCheck('eleInverse')"
							style="margin-top: 8px;">反选</button>
					</div>
					<div class='layui-inline' style="padding-left: 3px;">
						<button class='layui-btn' id='eleClearAll' onclick="eleCheck('eleClearAll')"
							style="margin-top: 8px;">清空</button>
					</div>
					<div class='layui-inline' id="elementDiv"></div>
				</div>
			</li>
		</ul>
		<div class='box'>
			<div id='chartContainerDiv' style='width: 100%; height: 100px'>
				<div id='chartDiv'></div>
			</div>
		</div>
	</div>
	<script type='text/javascript' src='/libs/layui/layui.js'></script>
	<script th:inline='javascript'>
    document.title = [[${name}]] + document.title;
    var host = [[${#httpServletRequest.getHeader("Host")}]];
    //var years = [[${@dict.getType('sys_year')}]];

    var date = [[${date}]];
    var waMap = [[${waMap}]];
    var waElementArr;
    var defaultYAxisMax;
    
    //页面加载时，加载衡器要素
    var waCode=$('#waCode').val();
    getWaElementList(waCode);
    
    var currDate=new Date();
    var currMonth=currDate.getMonth()+1;
    if(currMonth<10){
    	currMonth='0'+currMonth;
    }
    $("#month").val(currMonth);

    layui.use(['element', 'form', 'laydate'], function() {
      var element = layui.element;
      var laydate = layui.laydate;
      var layer = layui.layer;
      var form = layui.form;

      form.render('select', 'first');
      //渲染日期控件
      laydate.render({
        elem: '#date'
      });
      //初始化日期默认时间
      var thisValue = form.val('first', {
        'date': date
      });
	  //监听表单提交
      form.on('submit(btnSubmitChartHis)', function(data) {
        loadChartHisData();
        return false;
      });
	  //衡器切换时，加载衡器要素
      form.on('select(selectWaCodeOnchange)', function (data) {
    	getWaElementList(data.value);
      });
	  //间隔切换时，控制日期条件显示
      form.on('select(selectTimeIntervalOnchange)', function (data) {
      	showTimeCondition(data.value);
      });
    })

    //图表容器
    var chartContainerDiv = document.getElementById('chartContainerDiv');
    //图表对象
    var chartDiv = document.getElementById('chartDiv');
    //设置echart容器调度
    $('#chartContainerDiv').height(window.innerHeight-180);
    //初始化图表
    var myChart = echarts.init(chartDiv);
    //加载数据
    function loadChartHisData(hour) {
      var param = $('#chartsHisForm').parseForm();
      var url = '/realtime/charthis';
      var loading = layer.load(2, { shade: false });
      $.post(url, {
        'waCode': param.waCode,
        'timeInterval':param.timeInterval,
        'year':param.year,
        'month':param.month,
        'date': param.date,
        'hour': param.hour
      }, 
      function(data) {
        layer.close(loading);
        if (data.result.data.length == 0) {
          layer.msg('没有检索到数据');
          myChart.clear();
          return;
        }
        //填充数据
        var xAxisData = [], seriesData = []
        for (i = 0; i < waElementArr.length; i++) {
    	  var elementName=waElementArr[i].name
	      var elementNum = waElementArr[i].elementNum
	      var elementCode = waElementArr[i].element_code
	      for (j = 0; j < elementNum; j++) {
	        var serieData = {
	          name: elementName+(j+1),
	          data: [],
	          type: 'line',
	          showSymbol: false,
	          itemStyle: { normal: { opacity: 1, barBorderRadius: 5 } }
	        }
	        seriesData.push(serieData)
	      }
        }
        //填充数据
        for (var i = 0; i < data.result.data.length; i++) {
	      xAxisData.push(data.result.data[i].time)
	      
	      var n=0;
      	  for (j = 0; j < waElementArr.length; j++) {
      		var elementCode =waElementArr[j].element_code
      		var elementNum = waElementArr[j].elementNum
      		for (k = 0; k < elementNum; k++) {
    	        var elementCodeIdx =elementCode + (k + 1)
    	        seriesData[n].data.push(data.result.data[i][elementCodeIdx])
    	        n++;
    	    }
      	  }
	    }
        var legendSelected={};
        for (i = 0; i < waElementArr.length; i++) {
          if(waElementArr[i].checked==false){
        	var elementName=waElementArr[i].name
      	    var elementNum = waElementArr[i].elementNum
      	    var elementCode = waElementArr[i].element_code
      	    
      	    for(j=1;j<=elementNum;j++){
      	    	var en=elementName+j;
      	    	legendSelected[en]=false;
      	    }
          }
        }
		//图表配置
        var option = {
          title: { text: '历史曲线', textStyle: { color: 'rgba(255,255,255,.6)' }, x: '20px' },
          legend: {top:'10px',textStyle:{color:'#FFF'},selected:legendSelected},
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          dataZoom: [{ type: 'inside', start: 30, end: 70 }, { start: 30, end: 70 }],
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          grid: { left: '1%', top: '40px', right: '1%', bottom: '50', containLabel: true },
          xAxis: {
            type: 'category', axisLabel : {interval : 60,show : true,textStyle : {color : 'rgba(255,255,255,.6)',fontSize : '12'},rotate : 40},
            textStyle: { color: 'rgba(255,255,255,.6)', fontSize: '12' },
            data: xAxisData
          },
          yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value} %'
              show: true,
              textStyle: {
                color: 'rgba(255,255,255,.6)',
                fontSize: '12'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            }
          },
          ],
          series: seriesData
        }
		//加载图表
        if (myChart) {
          myChart.dispose()
          myChart = echarts.init(chartDiv);
        }
        option && myChart.setOption(option)
        defaultYAxisMax=myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
      }, 'json')
    }
  
    function chartssize(container, charts) {
	  function getStyle(el, name) {
	    if (window.getComputedStyle) {
	      return window.getComputedStyle(el, null)
	    } else {
	      return el.currentStyle
	    }
	  }
	  var wi = getStyle(container, 'width').width
	  var hi = getStyle(container, 'height').height
      charts.style.width = wi
      charts.style.height = hi
    }
  
    chartssize(chartContainerDiv, chartDiv)
    window.onresize = function() {
      chartssize(chartContainerDiv, chartDiv)
    }
    //Y轴减小，放大
    function zoomIn() {
      var zoomScale=$("#zoomScale").val();
      zoomScale=parseInt(zoomScale);
      if(!zoomScale){
    	  zoomScale=10;
    	  $("#zoomScale").val(10);
      }
	  var option = myChart.getOption();
	  var yAxisMax=myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
	  option.yAxis = [ {
	  	 max: yAxisMax-zoomScale
	  } ]
	  myChart.setOption(option);
	}
    //Y轴增大，缩小
    function zoomOut() {
      var zoomScale=$("#zoomScale").val();
      zoomScale=parseInt(zoomScale);
      if(!zoomScale){
        zoomScale=10;
        $("#zoomScale").val(10);
      }
  	  var option = myChart.getOption();
  	  var yAxisMax=myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
  	  option.yAxis = [ {
  	  	 max: yAxisMax+zoomScale
  	  } ]
  	  myChart.setOption(option);
  	}
    function zoomDefault() {
      var option = myChart.getOption();
      var yAxisMax=myChart.getModel().getComponent('yAxis').axis.scale._extent[1];
      option.yAxis = [ {
    	 max: defaultYAxisMax
      } ]
      myChart.setOption(option);
    }
    
    function getWaElementList(waCode){
      $.get("/realtime/waElementList?waCode="+waCode, {},function(data){
    	waElementArr=data.result;
    	
    	//要素选择checkbox
        var elementDiv = $('#elementDiv');
        elementDiv[0].innerHTML="";
        
        for (i = 0; i < waElementArr.length; i++) {
      	  var elementName=waElementArr[i].name;
  	      var elementNum = waElementArr[i].elementNum;
  	      var elementCode = waElementArr[i].element_code;
    	  var eleCheck = "<span style='padding-left:10px;'><input type='checkbox' id='showEles"+(i+1)+"' name='showEles' value='"+elementCode+"' checked /><label for='showEles"+(i+1)+"'>"+elementName+"</label></span>";
  	      elementDiv.append(eleCheck);
  	      waElementArr.checked=true;
        }
      });
    }
    
    function showTimeCondition(value){
    	if(value=='1'){
    		$("#divYear").show();
    		$("#divMonth").hide();
    		$("#divDate").hide();
    		$("#divHour").hide();
    	}else if(value=='2'){
    		$("#divYear").show();
    		$("#divMonth").show();
    		$("#divDate").hide();
    		$("#divHour").hide();
    	}else if(value=='3'){
    		$("#divYear").hide();
    		$("#divMonth").hide();
    		$("#divDate").show();
    		$("#divHour").show();
    	}
    }
    
    function eleCheck(type){
      var legendSelected={};
      if(type=='eleShowAll'){
        $("input[id^=showEles]").prop("checked",true);
        $("input[id^=showEles]").trigger('change');
      }else if(type=='eleInverse'){
        $("input[id^=showEles]").each(function(){
          if(this.checked==true){
            this.checked=false;
          }else{
            this.checked=true;
          }
        })
        $("input[id^=showEles]").trigger('change');
      }else if(type=='eleClearAll'){
    	$("input[id^=showEles]").prop("checked",false);
        $("input[id^=showEles]").trigger('change');
      }
    }
    
    function eleIsChecked(elementCode){
      for (i = 0; i < waElementArr.length; i++) {
    	if(waElementArr[i].element_code==elementCode&&waElementArr[i].checked==true){
    		return true;
    	}
      }
      return false;
    }
    
    $("body").on('change', 'input[id^=showEles]', function() {
        var checkedValues = $('input[name="showEles"]:checked').map(function(){
          return this.value;
        }).get();
        var legendSelected={};
        for (i = 0; i < waElementArr.length; i++) {
          waElementArr[i].checked=false;
          var elementName=waElementArr[i].name
    	  var elementNum = waElementArr[i].elementNum
    	  for(j=1;j<=elementNum;j++){
    	  	var en=elementName+j;
    	   	legendSelected[en]=false;
    	  }
          for (j = 0; j < checkedValues.length; j++) {
        	if(waElementArr[i].element_code==checkedValues[j]){
        	  waElementArr[i].checked=true;
        		
        	  for(k=1;k<=elementNum;k++){
                var en=elementName+k;
                legendSelected[en]=true;
              }
            }
          }
        }
        var option = myChart.getOption();
        if(option){
        	option.legend[0]["selected"]=legendSelected;
        	myChart.setOption(option);
        }
    });
    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
